<template>
	<gracePage headerBG="#f4f4f4">
		<view slot="gHeader" class="main-bodybg-color">
			<view class="grace-header-body grace-relative">
				<text class="grace-header-icons your-icon iconxiangzuo font-size-34" style="" @tap="appFn.navigateBackFn"></text>
				<!-- 中间内容 -->
				<view class="grace-header-content-noflex py-1-5 px-3 text-center"><text class="grace-h4 text-center font-size-36" style="font-size:36rpx;">退款详情</text></view>
				<!-- 消息按钮 -->
				<text class="grace-header-icons my-icons"></text>
			</view>
		</view>
		<!-- 页面主体 -->
		<view slot="gBody">
			<view class="order-status text-center" v-if="goodsArr.name2 == '已退款'">
				<view class="pt-5 grace-flex-center text-center mb-2">
					<text class=" grace-icons icon-right grace-white grace-h3 mr-2 grace-bold">&nbsp;&nbsp;&nbsp;</text>
					<text class="grace-h3 grace-white">退款成功</text>
				</view>
				<text class="grace-white grace-h6">商家已退款，请留意您的账单</text>
			</view>
			<view class="order-status text-center" v-else>
				<view class="pt-5 grace-flex-center text-center mb-2">
					<text class=" grace-icons icon-time2 grace-white grace-h3 mr-2">&nbsp;&nbsp;&nbsp;</text>
					<text class="grace-h3 grace-white">待处理</text>
				</view>
				<text class="grace-white grace-h6">待商家处理，请耐心等候</text>
			</view>
			<view class="grace-card-view mt-1">
				<view class="grace-card-body">
					<view class="grace-card-desc ">
						<view class="grace-card-title grace-border-b">
							<text class="grace-card-name">您已成功发起退款申请，请耐心等待商家处理</text>
						</view>
						<text class="grace-card-text">1.商家同意或者超时未处理，系统将退款给您</text>
						<text class="grace-card-text">2.如果商家拒绝，您可以修改申请后再次发起，商家会重新处理</text>
					</view>
				</view>
			</view>
			<divider></divider>
			<divider></divider>
			<view class="grace-card-view mt-0">
				<view class="grace-space-between grace-border-b pb-1">
					<text class="">退款信息</text>
					<view>
						<text class="grace-card-name grace-text-small grace-gray grace-red">{{ goodsArr.name1 }}</text>
						<text class="grace-card-name grace-text-small grace-gray grace-red">{{ goodsArr.name2 }}</text>
					</view>
				</view>
				<view class="grace-list my-2">
					<view class="grace-list-items">
						<view class="my-list-image ucenter-face grace-relative">
							<image class="my-list-image ucenter-face-image" :src="goodsArr.goods_thumb" mode="widthFix"></image>
						</view>
						<view class="grace-list-body">
							<view class="grace-list-title">
								<text class="my-list-title-text grace-h4 grace-ellipsis">{{ goodsArr.goods_name }}</text>
							</view>
							<view class="grace-list-title pb-1">
								<text class="my-list-title-text grace-black9 grace-text">{{ goodsArr.goods_attr }}</text>
							</view>
							<view class="grace-space-between mt-1 grace-flex-vcenter">
								<text class="grace-h5 grace-red">￥{{ goodsArr.shop_price }}</text>
								<text class="font-size-22 pr-2">x{{ goodsArr.return_number }}</text>
							</view>
						</view>
					</view>
				</view>
				<view class=" my-2">
					<view class="grace-card-title">
						<text class="grace-card-name w-120">订单编号</text>
						<text class="grace-card-name grace-text-small grace-gray">{{ goodsArr.order_sn }}</text>
					</view>
					<view class="grace-card-title">
						<text class="grace-card-name w-120">提交时间</text>
						<text class="grace-card-name grace-text-small grace-gray">{{ goodsArr.apply_time }}</text>
					</view>
					<view class="grace-card-title">
						<text class="grace-card-name w-120">申请退款</text>
						<text class="grace-card-name grace-text-small grace-gray">{{ goodsArr.should_return }}</text>
					</view>
					<view class="grace-card-title" v-if="goodsArr.actual_return != '0.00'">
						<text class="grace-card-name w-120">实际退款</text>
						<text class="grace-card-name grace-text-small grace-gray">{{ goodsArr.actual_return }}</text>
					</view>
					<view class="grace-card-title">
						<text class="grace-card-name w-120">退货原因</text>
						<text class="grace-card-name grace-text-small grace-gray">{{ goodsArr.cause_name }}</text>
					</view>
					<view class="grace-card-title">
						<text class="grace-card-name w-120">退货描述</text>
						<text class="grace-card-name grace-text-small grace-gray">{{ goodsArr.return_brief }}</text>
					</view>
					<view class="grace-card-title">
						<text class="grace-card-name w-120">留言</text>
						<text class="grace-card-name grace-text-small grace-gray">{{ goodsArr.remark }}</text>
					</view>
				</view>
			</view>
		</view>
	</gracePage>
</template>
<script>
import gracePage from '@/graceUI/components/gracePage.vue';
export default {
	data() {
		return {
			goodsArr: [],
			gotoStatus: true,
			retid: 0
		};
	},
	onLoad: function(e) {
		if (e.retid) {
			this.retid = e.retid;
		}
		console.log('this.retid', this.retid);
		this.__init();
	},
	methods: {
		async __init() {
			let data = await this.$HTTP.post('/api/api.php', { act: 'get_returninfo', ret_id: this.retid }, { token: true });
			this.goodsArr = data[0];
			console.log('datsdasd', data);
		}
	},
	components: { gracePage }
};
</script>
<style scoped>
.order-status {
	background-image: url(/static/images/order-bg.png);
	background-size: 100% 100%;
	height: 228rpx;
	width: 750rpx;
}
.w-120{
	width: 120rpx;
}
</style>
